<template>
  <el-dialog
    width="50%"
    :title="$t('m.add')+$t('m.printservice.printer')"
    :visible.sync="popupVisible"
    :before-close="close"
  >
    <el-form ref="form" size="mini" :model="form" label-width="60px">
      <el-row>
        <el-col :span="10">
          <el-form-item :label="$t('m.printservice.printer')+'：'">
            <!-- <template v-if="(detail.printerList instanceof Array)"> -->
            <template v-if="!action">
              <el-select v-model="form.printer" :placeholder="$t('m.choose')+$t('m.printservice.printer')" @change="selectChange">
                <el-option
                  v-for="(item,index) in detail.printerList"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </template>
            <template v-else>
              <el-select v-model="form.printer" disabled></el-select>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="4">
          <el-form-item :label="$t('m.printservice.alias')+'：'">
            <el-input maxlength="10" show-word-limit v-model="form.alias" :placeholder="$t('m.enter')+$t('m.printservice.alias')"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-transfer
        style="text-align: left; display: inline-block"
        v-model="selectServiceList"
        :props="{
          key:'printserviceid',
          label:'printservicename'
        }"
        filterable
        :left-default-checked="[]"
        :right-default-checked="[]"
        :titles="[$t('m.printservice.servicelist'), $t('m.printservice.nowlist')]"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}'
        }"
        :data="detail.serviceList"
      ></el-transfer>
    </el-form>
    <el-row>
      <el-col :span="24">
        <el-button size="mini" @click="close">{{$t('m.cancel')}}</el-button>
        <el-button size="mini" type="primary" @click="save">{{$t('m.save')}}</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
export default {
  name:'print-service-popup',
  props:['popupVisible', 'detail'],
  data(){
    return {
      form:{
        printer:'', // 打印机全称
        alias:'' // 打印机别名
      },
      selectServiceList:[],
      action:0 // 0:新增 1:编辑
    }
  },
  mounted(){
    this.action = this.$parent.$data.action
    if (this.action){
      this.form.printer = this.detail.printerList || ''
      this.form.alias = this.detail.alias || ''
      this.selectServiceList = this.detail.selectServiceList
    }
  },
  methods:{
    close(){
      this.$emit('close')
    },
    selectChange(value){
      this.form.alias = value
    },
    save(){
      if (!this.form.printer) return this.callbackMessage(this.$t('m.choose')+this.$t('m.printservice.printer'))
      if (!this.form.alias) return this.callbackMessage(this.$t('m.enter')+this.$t('m.printservice.alias'))
      if (!this.selectServiceList.length)
        return this.callbackMessage(this.$t('m.printservice.empty'))
      this.$emit('save', this.form, this.selectServiceList)
    }
  }
}
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.el-transfer {
  margin-bottom: 20px;
}
</style>